<template>
	<!-- :class="themeType == 'dark' ? 'wf-dark' : ''" -->
	<view class="wf-box">
		<view v-if="barshow" class="bar" :style="{height:navBarHeight}"></view>
		<view class="wf-bg">
			<view class="main" :style="{ paddingTop: navBarHeight }">
				<view class="head">
					<!-- <image src="../../static/img/demo-01.png" class="head-img" @click="jumpMeInfo"></image> -->
					<image :src="userInfo.avatar" class="head-img" @click="jumpEditInfo"></image>
					<view class="head-info">
						<view class="head-up">
							<view class="head-name">{{ userInfo.nickname }}</view>
							<!-- <view class="head-level">
								<image src="../../static/img/me-02.png"></image>
							</view> -->
							<view class="head-ren" @click="idRenz()">认证</view>
						</view>

						<view class="head-code">
							<text>ID:{{ userInfo.id }}</text>
							<image src="../../static/img/me-03.png" @click="copyId"></image>
						</view>
					</view>

					<view class="head-more">
						<view>
							<image src="../../static/img/me-04.png" class="head-ewm" @click="jumpMeCode"></image>
							<image src="../../static/img/chat-20.png" class="head-right"></image>
						</view>
					</view>

				</view>

				<view class="legal">
					<view class="legal-tit">
						<view class="level">LV.0</view>
						<view class="level-ft" @click="inEquity">专属权益</view>
						<view class="legal-more" @click="moreEq">
							<text>更多等级权益</text>
							<image src="../../static/img/me-06.png"></image>
						</view>
					</view>

					<view class="legal-speed">

					</view>

					<view class="legal-speed-tp">
						<view class="ratio">
							<text>0.00</text>/100
						</view>
						<view class="f-s">
							还需100社交值，可升级LV.1
						</view>
					</view>
				</view>

				<view class="tab-wrap">
					<view class="tab-item" @click="jumpWallet">
						<view>资金钱包</view>
						<view>管理钱包资产</view>
					</view>

					<view class="tab-item" @click="jumpKt">
						<view>交易钱包</view>
						<view>赚取更多资产</view>
					</view>
				</view>
			</view>
		</view>


		<view class="main">
			<view class="tab-navs">
				<view class="nav-item" @click="tok()">
					<image src="../../static/img/me-09.png" class="nav-icon"></image>
					<text>C圈</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>

				<view class="nav-item" @click="jumpMeInfo()">
					<image src="../../static/img/me-10.png" class="nav-icon"></image>
					<text>收藏</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>

				<view class="nav-item" @click="jumpMeInfo()">
					<image src="../../static/img/me-11.png" class="nav-icon"></image>
					<text>设置</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>

				<view class="nav-item" @click="sharePost()">
					<image src="../../static/img/me-12.png" class="nav-icon"></image>
					<text>分享</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>

				<view class="nav-item" @click="team()">
					<image src="../../static/img/me-53.png" class="nav-icon"></image>
					<text>我的团队</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>

				<view class="nav-item" @click="jumpBindOtc" v-if="!userInfo.isBindOtc">
					<image src="../../static/img/me-bind.png" class="nav-icon"></image>
					<text>绑定OTC</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>

				<view class="nav-item" @click="jumpGuest()">
					<image src="../../static/img/me-msg.png" class="nav-icon"></image>
					<text>我要留言</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>

				<view class="nav-item" @click="logOut">
					<image src="../../static/img/me-logout.png" class="nav-icon"></image>
					<text>退出登录</text>
					<image src="../../static/img/chat-20.png" class="nav-more"></image>
				</view>
			</view>

			<view class="nav-share">
				<view class="share-item">
					<image src="../../static/img/me-13.png"></image>
					<text>Twitter</text>
				</view>

				<view class="share-item">
					<image src="../../static/img/me-14.png"></image>
					<text>Telegram</text>
				</view>

				<view class="share-item">
					<image src="../../static/img/me-15.png"></image>
					<text>Descord</text>
				</view>

				<view class="share-item">
					<image src="../../static/img/me-16.png"></image>
					<text>Medium</text>
				</view>
			</view>

		</view>

		<!-- </view> -->
		<uni-popup ref="popup" type="bottom" @maskClick="closePopup">
			<view class="popup-box">
				<view class="authoty">
					<view class="authoty-box">
						<view class="auth-lt">
							<view>暂无权限</view>
							<view>
								想获得更加丰富的社交体验？ <br>只需满足一下两个条件，即可获得社交值：
							</view>
						</view>
						<view class="auth-rt">
							<image src="../../static/img/me-59.png"></image>
						</view>
					</view>

					<view class="con-im">
						<image src="../../static/img/me-60.png"></image>
						<!-- Please ensure that you have access to the platform -->
						<view class="con-txt">请确保您在平台中拥有不少于 100KT/100USDT的资产。</view>

						<view class="con-status unbound">
							未达标
						</view>
					</view>
				</view>

				<view class="pd">
					<view class="con-im">
						<image src="../../static/img/me-61.png"></image>
						<!-- Please ensure that you have access to the platform -->
						<view class="con-txt">请绑定您的邮箱，以便我们更好地 保护您的账户安全。</view>

						<view class="con-status unbound">
							未达标
						</view>
					</view>
					<view class="con-tip">期待您的加入，共同创造更多精彩！</view>

					<view class="con-footer">
						<view @click="closePopup">我知道啦</view>
					</view>
				</view>

			</view>
		</uni-popup>

		<uni-popup ref="popup1" type="center">
			<view class="popup-box1">
				<view class="popup-title">温馨提示</view>

				<view class="popup-sub-tit">是否确认退出登录</view>
				<view class="popup-footer">
					<view class="cancle" @click="closePopup()">取消</view>
					<view class="confim" @click="confimLogOut">确认</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup2">
			<view class="popup-post">

				<view class="post-main">
					<l-painter
						css="width: 560rpx; height: 720rpx; padding: 14rpx; background: linear-gradient( 180deg, #E8F4FD 0%, #FFFFFF 50%); border-radius: 10rpx;"
						ref="painter">
						<l-painter-view css="width: 100%; height: 100%; border: 2rpx solid #ccc">
							<l-painter-view css="text-align:center; margin-top: 20rpx;">
								<l-painter-text text="链爱比特"
									css="font-size: 56rpx; color: #333; text-align:right;"></l-painter-text>
							</l-painter-view>
							<l-painter-view css="text-align:center; margin-top: 10rpx;">
								<l-painter-text text="元宇宙社交新体验"
									css="font-size: 28rpx; color: #333; text-align:right;"></l-painter-text>
							</l-painter-view>
							<!-- https://ktalk-chat.oss-cn-beijing.aliyuncs.com/default_avatar/default_avatar.png -->
							<l-painter-view css="width: 460rpx; margin: 0 auto; margin-top: 60rpx;">
								<l-painter-image src="../../static/img/share.png"
									css="width: 460rpx; height: 280rpx;"></l-painter-image>
							</l-painter-view>

							<!-- justify-content: space-between -->
							<l-painter-view
								css="width: 460rpx; height: 100rpx; margin: 0 auto; margin-top: 60rpx; display: flex; align-items: center; ">
								<!-- <l-painter-view class="display: flex;"> -->
								<l-painter-view>
									<l-painter-image src="../../static/img/logn.png"
										css="width: 100rpx; height: 100rpx;"></l-painter-image>
								</l-painter-view>


								<l-painter-view>
									<l-painter-view>
										<l-painter-text :text="userInfo.id"
											css="font-size: 24rpx; color: #333;"></l-painter-text>
									</l-painter-view>
									<l-painter-view>
										<l-painter-text text="邀请你加入链爱比特"
											css="font-size: 24rpx; color: #333;"></l-painter-text>
									</l-painter-view>
									<l-painter-view>
										<l-painter-text :text="'邀请码：'+userInfo.inviteCode"
											css="font-size: 24rpx; color: #333;"></l-painter-text>
									</l-painter-view>

									<!-- <l-painter-text text="邀请你加入链爱比特!" css="font-size: 24rpx; color: #333;"></l-painter-text> -->
								</l-painter-view>

								<!-- </l-painter-view> -->

								<l-painter-view css="margin-left: 60rpx">
									<l-painter-qrcode :text="androidUrl" css="width: 100rpx; height: 100rpx;"
										v-if="androidUrl" />
								</l-painter-view>



							</l-painter-view>

						</l-painter-view>
					</l-painter>
					<!-- </view> -->

				</view>

				<view class="tarbar-btn">
					<view class="bar-up">
						<view class="bar-item" @click="saveImg">
							<image src="../../static/img/share-01.png"></image>
							<view>保存图片</view>
						</view>
						<view class="bar-item mar-lt" @click="copyAddUrl">
							<image src="../../static/img/share-02.png"></image>
							<view>复制链接</view>
						</view>
						<view class="bar-item mar-lt" @click="copyCode(userInfo.inviteCode)">
							<image src="../../static/img/share-02.png"></image>
							<view>复制邀请码</view>
						</view>
					</view>
					<view class="bar-down" @click="canclePost">取消</view>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="center">
			<view class="popup-box3">
				<view class="popup-title">绑定推荐人</view>
				<input type="text" placeholder="请输入推荐人邀请码" v-model="bangID" />
				<view class="popup-footer">
					<view class="cancle" @click="close()">取消</view>
					<view class="confim" @click="confim()">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		checkAddressApi,
		getMeUserAPI,
		getNewAppInfoAPI,
		bindInviteUser
	} from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				textId: '',
				themeType: '',
				userInfo: '',
				barshow: false,
				androidUrl: '',
				bangID: '',
			}
		},
		mixins: [navBarMixin],
		methods: {
			confim() {
				bindInviteUser({inviteCode:this.bangID}).then(res=>{
					this.close()
					if(res.code==0){
						uni.showToast({
							title:'绑定成功！',
							icon:'none'
						})
					}else {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			openpup() {
				this.$refs.popup3.open()
			},
			close() {
				this.bangID = ''
				this.$refs.popup3.close()
			},
			idRenz() {
				let type =this.userInfo.isRealName?1:2
				uni.navigateTo({
					url: '/pages/me/idRenz?type='+type
				});
			},
			brok() {
				uni.navigateTo({
					url: '/pages/me/brok?url=' + encodeURIComponent('https://htpage.qiaonongrenzf.cn')
				});
			},
			inEquity() {
				// console.log('this.$i18n===',this.$i18n)

				uni.showToast({
					title: '暂未开放,敬请期待',
					icon: 'none'
				})
			},

			tok() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				return
				uni.navigateTo({
					url: '/pages/me/kCircle'
				})
			},
			team() {
				console.log(this.userInfo.inviteUser);
				if (!this.userInfo.inviteUser) {
					this.openpup()
				} else {
					uni.navigateTo({
						url: '/pages/me/team?tome=' + this.userInfo.inviteUser + '&me=' + this.userInfo.id
					})
				}
			},
			jumpEditInfo() {
				uni.navigateTo({
					url: '/pages/me/meInfo'
				})
			},

			jumpMeCode() {
				// uni.showToast({
				// 	title: '敬请期待',
				// 	icon: 'none'
				// })
				// return

				uni.navigateTo({
					url: '/pages/me/code'
				})
			},

			jumpMeInfo() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				return
			},

			async sharePost() {
				const res = await getNewAppInfoAPI()
				if (!res.code) {
					this.androidUrl = res.data.androidUrl
					uni.hideTabBar()
					this.$refs.popup2.open()
				}

			},
			saveImg() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						let that = this
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								// console.log('save success');
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.showTabBar()
									that.$refs.popup2.close()
								}, 1000)
							}
						});

					}
				})
			},

			copyAddUrl() {
				let that = this
				uni.setClipboardData({
					data: this.androidUrl,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.showTabBar()
							that.$refs.popup2.close()
						}, 1000)

					}
				})
			},
			copyCode(e) {
				let that = this
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.showTabBar()
							that.$refs.popup2.close()
						}, 1000)
					}
				})
			},

			canclePost() {
				uni.showTabBar()

				this.$refs.popup2.close()
			},

			moreEq() {
				uni.showToast({
					title: '暂未开发,敬请期待',
					icon: 'none'
				})

				return

				// 有等级
				uni.navigateTo({
					url: '/pages/me/level'
				})
				// 无等级
				// uni.hideTabBar()
				// this.$refs.popup.open()
			},

			closePopup() {
				uni.showTabBar()
				this.$refs.popup.close()
				this.$refs.popup1.close()
			},

			changeBg() {
				// this.themeType = getApp().globalData.themeType
				// console.log(getApp().globalData.themeType)
				// console.log('12==',this.themeType)
				// console.log(this.$theme-color-b)
			},

			async jumpWallet() {
				const res = await checkAddressApi()
				if (res.data) {
					uni.navigateTo({
						url: '/pages/me/wallet'
					})
				} else {
					uni.showToast({
						title: '您需要有CC资产才能激活资金钱包',
						icon: 'none'
					})
				}
			},
			jumpGuest() {
				uni.navigateTo({
					url: '/pages/me/guestBox'
				})
			},

			jumpKt() {
				uni.navigateTo({
					url: '/pages/me/kt?info=' + JSON.stringify(this.userInfo)
				})
			},

			logOut() {
				this.$refs.popup1.open()
			},

			confimLogOut() {
				this.$refs.popup1.close()
				uni.removeStorageSync('token')
				getApp().exit()
			},

			// 获取本人信息
			async getMeUserInfo() {
				const res = await getMeUserAPI()
				if (!res.code) {
					this.userInfo = res.data

				}
			},

			// 复制id
			copyId() {
				uni.setClipboardData({
					data: this.userInfo.id,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},

			jumpBindOtc() {
				uni.navigateTo({
					url: '/pages/me/bindOtc'
				})
			}
		},
		onShow() {
			this.getMeUserInfo()
		},
		onPageScroll(e) {
			// console.log(e);
			if (e.scrollTop > 30) {
				this.barshow = true
			} else {
				this.barshow = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		padding-bottom: 44rpx;

		.bar {
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
			animation: bg 0.8s 1 both linear;
			background-color: #B1DBFE;
		}

		// min-height: 670rpx;
		.wf-bg {
			background: url('../../static/img/me-01.png') no-repeat;
			background-size: 100% 100%;
		}

		.main {
			padding: 0 30rpx;

			.head {
				display: flex;
				align-items: center;
				padding-top: 32rpx;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.head-info {
					// display: flex;
					margin-left: 20rpx;

					.head-up {
						display: flex;

						.head-name {
							color: #333;
							font-weight: bold;
						}

						.head-level {
							image {
								width: 100rpx;
								height: 38rpx;
							}
						}
						.head-ren {
							width: 94rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							background: #F4E5C9;
							border-radius: 22rpx;
							font-size: 26rpx;
							color: #CE6C25;
							margin-left: 16rpx;
						}
					}

					.head-code {
						display: flex;
						align-items: center;
						color: #6C6B6B;
						font-size: 24rpx;
						margin-top: 8rpx;

						image {
							margin-left: 12rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}

				}

				.head-more {
					margin-left: auto;

					&>view {
						display: flex;
						align-items: center;
					}

					.head-ewm {
						width: 48rpx;
						height: 48rpx;
					}

					.head-right {
						margin-left: 20rpx;
						width: 10rpx;
						height: 20rpx;
					}
				}
			}

			.legal {
				height: 236rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background: url('../../static/img/me-05.png') no-repeat;
				background-size: 100% 100%;

				.legal-tit {
					display: flex;
					align-items: center;

					.level {
						padding: 6rpx 14rpx;
						font-size: 24rpx;
						background: #FFD893;
						border-radius: 20rpx;
						color: #333;
					}

					.level-ft {
						margin-left: 16rpx;
						color: #FFD893;
						font-size: 28rpx;
					}

					.legal-more {
						margin-left: auto;
						display: flex;
						align-items: center;

						text {
							margin-right: 16rpx;
							color: #DBC090;
							font-size: 24rpx;
						}

						image {
							width: 8rpx;
							height: 18rpx;
						}
					}
				}

				.legal-speed {
					height: 16rpx;
					background: #5B5B5B;
					border-radius: 10rpx;
				}

				.legal-speed-tp {
					display: flex;
					justify-content: space-between;

					.ratio {
						color: #FFD893;
						font-size: 24rpx;

						text {
							font-size: 32rpx;
						}
					}

					.f-s {
						color: #FFD893;
						font-size: 24rpx;
						font-size: 24rpx;
					}
				}
			}

			.tab-wrap {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.tab-item {
					width: 333rpx;
					height: 183rpx;
					padding: 30rpx 24rpx;
					padding-bottom: 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;

					&:first-child {
						background: url('../../static/img/me-07.png') no-repeat;
						background-size: 100% 100%;
					}

					&:last-child {
						background: url('../../static/img/me-08.png') no-repeat;
						background-size: 100% 100%;
					}

					view {
						color: #62B9FF;

						&:first-child {
							font-size: 28rpx;
							font-weight: bold;
						}

						&:last-child {
							font-size: 24rpx;
						}
					}


				}
			}

			.tab-navs {
				margin-top: 30rpx;
				padding: 0 30rpx;
				padding-bottom: 58rpx;
				background: #fff;
				border-radius: 10rpx;

				.nav-item {
					display: flex;
					align-items: center;
					height: 108rpx;
					border-bottom: 2rpx solid #EEEEEE;

					.nav-icon {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						margin-left: 20rpx;
						font-size: 28rpx;
					}

					.nav-more {
						margin-left: auto;
						width: 10rpx;
						height: 20rpx;
					}
				}
			}

			.nav-share {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;

				.share-item {
					image {
						display: block;
						width: 68rpx;
						height: 68rpx;
						margin: 0 auto;
					}

					text {
						color: #666;
						font-size: 24rpx;
					}
				}
			}
		}

		.popup-box {
			padding-bottom: 60rpx;
			// width: 660rpx;
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;

			.authoty {
				padding: 0 30rpx;
				padding-top: 40rpx;
				background: linear-gradient(180deg, #DFEDFF 0%, #FFFFFF 100%);

				&>.authoty-box {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}

				.auth-lt {
					view: first-child {
						color: #333;
						font-size: 32rpx;
					}

					view:last-child {
						margin-top: 30rpx;
						color: #666;
						font-size: 24rpx;
					}
				}

				.auth-rt {
					image {
						width: 165rpx;
						height: 178rpx;
					}
				}
			}

			.con-im {
				display: flex;
				margin-top: 30rpx;
				padding: 20rpx 24rpx;
				border: 2rpx solid #ddd;
				border-radius: 20rpx;

				image {
					width: 28rpx;
					height: 21rpx;
				}

				.con-txt {
					margin-left: 16rpx;
					width: 320rpx;
					// margin-right: 180rpx;
					font-size: 24rpx;
				}

				.con-status {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					&.unbound {
						color: #999999;
					}
				}
			}

			.pd {
				padding: 0 30rpx;

				.con-tip {
					margin-top: 20rpx;
					color: #666;
				}

				.con-footer {
					padding: 0 35rpx;

					view {
						margin-top: 50rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: $theme-color-a;
						border-radius: 40rpx;
						color: #fff;
					}
				}
			}
		}

		.popup-box1 {

			width: 583rpx;
			height: 530rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			background: url('../../static/img/me-32.png') no-repeat;
			background-size: cover;
			overflow: hidden;

			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-top: 224rpx;
			}

			.popup-sub-tit {
				color: #666;
				font-size: 28rpx;
				margin-top: 50rpx;
				text-align: center;
			}

			.popup-sub {
				margin-top: 36rpx;
				color: #666;
				font-size: 28rpx;
				text-align: center;
			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;
				padding: 0 50rpx;

				.cancle {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
				}

				.confim {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}
		}

		.popup-post {
			height: 100vh;
			width: 100vw;
			position: relative;
			box-sizing: border-box;

			.post-main {
				width: 560rpx;
				position: absolute;
				left: 50%;
				bottom: 500rpx;
				transform: translateX(-50%);
				height: 720rpx;
				box-sizing: border-box;
				// background: linear-gradient( 180deg, #E8F4FD 0%, #FFFFFF 100%);
				background: #fff;
				border-radius: 10rpx;
				// .post-ctr {
				// 	height: 100%;
				// 	padding: 10rpx;
				// 	box-sizing: border-box;
				// }
			}

			.tarbar-btn {
				position: absolute;
				bottom: 0;
				width: 100%;
				background: #fff;
				border-radius: 24px 24px 0px 0px;

				.bar-up {
					padding: 40rpx;
					height: 216rpx;
					border-bottom: 10rpx solid #eee;
					box-sizing: border-box;

					.bar-item {
						// width: 100rpx;
						display: inline-block;

						image {
							display: block;
							width: 80rpx;
							height: 80rpx;
							margin: 0 auto;
						}

						view {
							margin-top: 20rpx;
							font-size: 24rpx;
						}

						&.mar-lt {
							margin-left: 60rpx;
						}
					}
				}

				.bar-down {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
				}
			}
		}
	}
	.popup-box3 {
		width: 583rpx;
		height: 550rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background: #fff;
		background: url('../../static/img/me-32.png') no-repeat;
		background-size: cover;
		overflow: hidden;
	
		.popup-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			text-align: center;
			margin-top: 180rpx;
		}
		.popup-footer {
			display: flex;
			justify-content: space-between;
			margin: 72rpx 52rpx 0;
	
			.cancle {
				width: 200rpx;
				line-height: 76rpx;
				text-align: center;
				border: 2rpx solid #3F93FF;
				border-radius: 40rpx;
				color: #3F93FF;
			}
	
			.confim {
				width: 200rpx;
				line-height: 76rpx;
				text-align: center;
				border-radius: 40rpx;
				background: #3F93FF;
				color: #fff;
			}
		}
	
		input {
			// width: 500rpx;
			margin: 40rpx 40rpx 0;
			padding: 0 30rpx;
			height: 80rpx;
			font-size: 26rpx;
			line-height: 80rpx;
			background: #F4F4F4;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
		}
	}
</style>